<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }

    .item {
        padding: 0 0.8rem;

    }

    .item p {
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.7rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .item span {
        font-size: 0.5rem;
        color: #ccc;
    }

    .item input {
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.6rem;
        width: 100%;
    }

    .item .add_yaocai {
        width: 70%;
        margin: 1rem 15%;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: #fff;
        font-size: 0.7rem;
        border-radius: 0.5rem;
        background-color: #2E8EFF;
    }

    .yaocai_div {
        background-color: #fff3f3;
        width: 100%;
    }

    .yaocai_div .yaocai_item {
        width: 33.34%;
        display: inline-block;
        margin-left: -0.25rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        font-size: 0.6rem;
    }

    .yaocai_div .queren {
        width: 70%;
        float: left;
        margin: 1rem 15%;
        background-color: #2E8EFF;
        text-align: center;
        line-height: 2.5rem;
        height: 2.5rem;
        color: #fff;
        border-radius: 0.5rem;
    }

    .RP_item {
        font-size: 0.6rem;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        /* border: 1px solid #565656; */
        margin: 0.5rem 0;
    }

    .RP_item div {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        font-size: 0.6rem;
        border-radius: 50%;
        color: #565656;
        border: 1px solid #565656;
        /* margin-top: 0.5rem; */
        line-height: 1.1rem;
        text-align: center;
        /* margin-right: 0.3rem; */
    }

    .RP_item input {
        width: 28%;
        height: 1rem;
        margin-top: 0.5rem;
        font-size: 0.6rem;
        /* margin-left: 0.2rem; */
        border-bottom: 1px solid #e8e8e8;
        text-align: center;
    }

    .RP_item input:last-child {
        width: 10%;
    }

    .RP_item img {
        width: 0.7rem;
        height: 0.7rem;
        float: right;
        margin: 0.65rem 0.45rem 0 0;
    }

    .RP_item_img {
        margin-top: 0.5rem;
        text-align: center;
        width: 100%;
        height: 2rem;
    }

    .RP_item_img img {
        width: 1.5rem;
        height: 1.5rem;
        object-fit: scale-down;
    }

    .search_div {
        position: fixed;
        top: 12rem;
        width: 100%;
    }

    .search_div div {
        height: 2rem;
        line-height: 2rem;
        background-color: #ccc;
        color: #fff;
        border-bottom: 1px solid #e8e8e8;
        width: 90%;
        padding-left: 10%;
        font-size: 0.6rem;
    }
</style>

<body>
    <div  id="app" v-cloak>

        <div class="placeholder_div"></div>

        <div class="item">
            <p class="title">方名</p>
            <input type="text" v-model="name" maxlength="15" placeholder="输入常用方名称，不能超过15个字符">
        </div>
        <div class="placeholder_div"></div>
        <div class="item">
            <p class="title">备注</p>
            <input type="text" v-model="remark" placeholder="请输入处方备注">
        </div>
        <div class="placeholder_div"></div>
        <div class="item">
            <p class="title">RP: <span>点击加号开始输入药材</span></p>
            <div class="RP_item" v-for="(item,index) in frequentItemDtoList">
                <div>{{index+1}}</div>
                <img src="../image/icon_wrong.png" @click="del_drugs(index)" alt="">
                药材名称：<input type="text" v-model="item.name" @input="search_yaocai_name(item.name,index)">，药材净重：<input
                    type="number" v-model="item.quantity">{{item.unit}}


            </div>
            <div class="RP_item_img">
                <img src="../image/icon_chat_more.png" @click="add_drugs" alt="">
            </div>

        </div>
        <div class="yaocai_div" v-if="!update_data">
            <div class="queren" onclick="submit()">确认</div>
        </div>
        <div class="yaocai_div" v-else>
            <div class="queren" onclick="update()">修改</div>
        </div>
        <div class="search_div" v-if="search_div">
            <div class="search_item" v-for="item in search_data" @click="add_item(item)">{{item.name}}</div>
        </div>


    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        if (api.pageParam.id) {
            app.update_data = true
            // alert(String(api.pageParam.id))
            get_ajax("doctor/frequent/view", {
                id: api.pageParam.id
            }, function (res, err) {
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                    app.name = res.data.name
                    app.remark = res.data.remark
                    app.frequentItemDtoList = res.data.frequentItemVoList
                } else {
                    alert("请求出错，请稍后再试~")
                }
            })
        }
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            name: "",
            remark: "",
            frequentItemDtoList: [],
            update_data: false,
            search_data: [], // 搜索出来的结果
            search_index: 0, // 搜索的第几条,默认第一条
            search_div: false, // 搜索框展示
        },
        methods: {
            add_drugs: function () {
                var item = {
                    name: "",
                    drugsNo: "",
                    salePrice: "",
                    specs: "",
                    drugsId: "",
                    quantity: "",
                    unit: "g",
                    remark: "",
                }
                this.frequentItemDtoList.push(item)
            },
            del_drugs: function (index) {
                this.frequentItemDtoList.splice(index, 1)
            },
            search_yaocai_name: function (val, index) {
                get_ajax("item/drugs/listpage", {
                    searchKey: val,
                    start: 1,
                    pagesize: 10,
                }, function (res, err) {
                    if (res.code == 200) {
                        // alert(JSON.stringify(res.data.data))
                        app.search_data = res.data.data
                        app.search_index = index
                        app.search_div = true
                    } else {
                        alert("网络不通畅，请稍后再试！")
                    }
                })
            },
            add_item: function (item) {
                // alert(JSON.stringify(item))
                // alert(app.search_index)
                var item = {
                    name: item.name,
                    drugsNo: item.drugsNo,
                    specs: item.specs,
                    salePrice: item.salePrice,
                    drugsId: item.id,
                    quantity: 10,
                    unit: "g",
                    remark: "无",
                }
                app.frequentItemDtoList[app.search_index] = item
                app.search_div = false
            }
        },

    })

    function submit() {
        // alert(JSON.stringify(app.frequentItemDtoList))
        if (!app.name) {
            toast("你还没输入方名")
            return
        } else if (!app.remark) {
            toast("你还没输入备注")
            return
        }
        for (var i = 0; i < app.frequentItemDtoList.length; i++) {
            if (app.frequentItemDtoList[i].drugsNo == "") {
                toast("您有药材还未选择完成，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else if (app.frequentItemDtoList[i].name == "") {
                toast("您有药材还没未输入完成，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else if (app.frequentItemDtoList[i].quantity == "") {
                toast("您有药材还未输入计量，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else if (app.frequentItemDtoList[i].quantity == 0) {
                toast("您有药材还未输入计量，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else {
                post_ajax("doctor/frequent/save", {
                    userId: $api.getStorage("emp").userId,
                    name: app.name,
                    remark: app.remark,
                    frequentItemDtoList: app.frequentItemDtoList,
                }, function (ret, err) {
                    if (ret.code == 200) {
                        // alert(JSON.stringify(ret))
                        toast("添加成功")
                        api.sendEvent({
                            name: 'add_my_always_useing',
                        });
                        setTimeout(function () {
                            api.closeWin()
                        }, 500);
                    } else {
                        // alert(JSON.stringify(ret))
                        alert("提交失败，请检查您输入的是否正确")
                    }
                })
            }
        }
    }

    function update() {
        // alert(JSON.stringify(app.frequentItemDtoList))
        // alert(app.frequentItemDtoList.length)
        if (!app.name) {
            toast("你还没输入方名")
            return
        } else if (!app.remark) {
            toast("你还没输入备注")
            return
        }
        for (var i = 0; i < app.frequentItemDtoList.length; i++) {
            if (app.frequentItemDtoList[i].drugsNo == "") {
                toast("您有药材还未选择完成，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else if (app.frequentItemDtoList[i].name == "") {
                toast("您有药材还没未输入完成，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else if (app.frequentItemDtoList[i].quantity == "") {
                toast("您有药材还未输入计量，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else if (app.frequentItemDtoList[i].quantity == 0) {
                toast("您有药材还未输入计量，在第" + (i + 1) + "行药材")
                $(".RP_item").eq(i).css("border", "1px solid #2E8EFF")
                return
            } else {
                if (app.frequentItemDtoList[i].updateTime) {
                    post_ajax("doctor/frequent/update", {
                        id: api.pageParam.id,
                        userId: $api.getStorage("emp").userId,
                        name: app.name,
                        remark: app.remark,
                        frequentItemDtoList: app.frequentItemDtoList,
                    }, function (ret, err) {
                        if (ret.code == 200) {
                            // alert(JSON.stringify(ret))
                            toast("修改成功")
                            api.sendEvent({
                                name: 'add_my_always_useing',
                            });
                            setTimeout(function () {
                                api.closeWin()
                            }, 500);
                        } else {
                            alert("修改失败，请检查您输入的是否正确")
                        }
                    })
                }
            }


        }
    }
</script>